<template>
  <div class="building-edit imageWrapper">
    <div style="width:100%; height:100%" ref="saveBg" class="build-bg">
      <img :src="currentBg" alt="" class="bg">
      <!-- <div class="building-bg" :style="{backgroundImage: 'url(' + currentBg + ')'}"> -->
      <!-- </div> -->
      <img
      class="setting-tools"
      v-for="item in currentEditDragItemLists"
      :key="item.id"
      :src="item.imgUrl"
      v-if="item.toolType === 2"
      style="width: 100px, height: 100px;"
      :style="{top: item.top + 'px', left: item.left + 'px', 'z-index': item.zIndex, width: item.width + 'px', height: item.height + 'px'}"
      :id="item.id"
      :data-canedite="item.canedite"
      @touchstart.stop="touchstart"
      @touchmove.stop="touchmove"
      @touchend.stop="touchend"
      @touchcancel.stop="touchcancel">
      <!-- <div
      class="setting-tools"
      :style="{top: item.top + 'px', left: item.left + 'px', 'z-index': item.zIndex, writingMode: item.isHeng ? 'tb' : 'lr', 'font-size': item.fontSize + 'px', 'font-weight': item.fontWeight, 'font-style': item.fontStyle, 'text-decoration': item.textDecoration, 'color': item.fontcolor}"
      v-for="item in currentEditDragItemLists"
      :key="item.id"

      :id="item.id"
      v-if="item.toolType === 'words'"
      @touchstart.stop="touchstart"
      @touchmove.stop="touchmove"
      @touchend.stop="touchend"
      @touchcancel.stop="touchcancel"
      > -->
      <div
       class="setting-tools"
      :style="{top: item.top + 'px', left: item.left + 'px', 'z-index': item.zIndex, 'font-size': item.fontSize + 'px', 'font-weight': item.fontWeight, 'font-style': item.fontStyle, 'text-decoration': item.textDecoration, 'color': item.fontcolor, 'width': item.width + 'px', 'height': item.height + 'px', 'font-family': item.fontFamily, 'writing-mode': item.isHeng ? 'tb': 'lr'}"
      v-for="item in currentEditDragItemLists"
      :key="item.id"
      :data-ismarquee="item.isMarquee"
      :data-canedite="item.canedite"
      :id="item.id"
      v-if="item.toolType === 'words' && !item.isMarquee"
      @touchstart.stop="touchstart"
      @touchmove.stop="touchmove"
      @touchend.stop="touchend"
      @touchcancel.stop="touchcancel"
      :contenteditable="item.isContentEditable"
      v-html="item.words"></div>
      <marquee
       class="setting-tools"
      :style="{top: item.top + 'px', left: item.left + 'px', 'z-index': item.zIndex, 'font-size': item.fontSize + 'px', 'font-weight': item.fontWeight, 'font-style': item.fontStyle, 'text-decoration': item.textDecoration, 'color': item.fontcolor, 'width': item.width + 'px', 'height': item.height + 'px', 'font-family': item.fontFamily}"
      v-for="item in currentEditDragItemLists"
      :key="item.id"
      :data-ismarquee="item.isMarquee"
      :data-canedite="item.canedite"
      :id="item.id"
      v-if="item.toolType === 'words' && item.isMarquee"
      @touchstart.stop="touchstart"
      @touchmove.stop="touchmove"
      @touchend.stop="touchend"
      @touchcancel.stop="touchcancel"
      :contenteditable="item.isContentEditable"
      :direction="item.direction"
      :scrollamount="item.scrollamount"
      :scrolldelay="item.scrolldelay"
      v-html="item.words"></marquee>
      <!-- </div> -->
    </div>
    <!-- <div class="info">
      <p class="info-item">
        <span class="words">浏览</span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-liulan"></use>
        </svg>
        <span class="value">0</span>
      </p>
      <p class="info-item">
        <span class="words">祭祀</span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-lazhu-copy"></use>
        </svg>
        <span class="value">0</span>
      </p>
      <p class="info-item">
        <span class="words">亲情</span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-jiashulianxijilu"></use>
        </svg>
        <span class="value">0</span>
      </p>
      <p class="info-item">
        <span class="words">财富</span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-caifu"></use>
        </svg>
        <span class="value">0</span>
      </p>
    </div> -->
    <div class="tool-list">
      <div class="btn" @click="showModal('jisi')">祭祀</div>
      <!-- <div class="btn" @click="showModal('bg')">背景</div> -->
      <!-- <div class="btn" @click="video">影像</div> -->
      <!-- <div class="btn" @click="music">音乐</div> -->
      <div class="btn" v-show="!canEdit" @click="edit">设置</div>
      <div class="btn" @click="save" v-show="canEdit">保存</div>
      <div class="btn" @click="toRouterFrom">返回</div>
    </div>
    <van-popup class="shopping-list-modal" v-model="show" position="right" :overlay="false">
      <div class="header" >
        <span class="btn" @click="close">取消</span>
        <span class="btn" @click="back" v-show="!outListWrapperShow">返回</span>
      </div>
      <div class="out-list-wrapper" v-show="outListWrapperShow">
        <div
        v-for="(shoppingOutList,index) in shoppingList"
        :key="index"
        class="out-list-item"
        @click="checkInnerList(shoppingOutList)">
          <img :src="shoppingOutList.imgUrl" alt="">
          <p class="tit">{{shoppingOutList.name}}</p>
        </div>
      </div>
      <div class="inner-list-wrapper" v-show="!outListWrapperShow">
        <div
        v-if="currentInnerShoppingList.length >= 1"
        v-for="(shoppingInnerList,index) in currentInnerShoppingList"
        :key="index"
        @click="payShopping(shoppingInnerList, shoppingInnerList.toolType)"
        class="inner-list-item">
          <img :src="shoppingInnerList.imgUrl" alt="">
          <p class="tit">{{shoppingInnerList.name}}</p>
          <p class="price">{{shoppingInnerList.price}}福币/次</p>
        </div>
      </div>
    </van-popup>

    <van-popup
    class="pay-modal"
    v-model="payPanelShow"
    position="center"
    :overlay="true"
    :close-on-click-overlay="true"
    :lock-scroll="true">
      <div class="pay-box">
        <p class="tit">标题</p>
        <div class="main-body">
          <div class="img-box">
            <img :src="currentShoppingPayInfo.imgUrl" alt="">
          </div>
          <div class="main-right">
            <p class="item">
              <span class="title">价格</span>
              <span class="price">{{currentShoppingPayInfo.price}}福币</span>
            </p>
            <div class="item">
              <span class="title">时效</span>
              <el-input-number
              v-model="currentShoppingPayInfo.months"
              @change="monthsHandleChange"
              :min="1"
              size="mini"></el-input-number>
              月
            </div>
            <p class="item">
              <span class="title">数量</span>
              <el-input-number
              v-model="currentShoppingPayInfo.number"
              @change="numberHandleChange"
              :min="1"
              size="mini"></el-input-number>
              个
            </p>
            <p class="item">
              <span class="title">原价</span>
              <span class="price">{{currentShoppingPayInfo.originalPrice}}福币</span>
            </p>
            <p class="item">
              <span class="title">会员价</span>
              <span class="price">{{currentShoppingPayInfo.vipPrice}}福币</span>
            </p>
          </div>
        </div>
        <div class="enter-pay">
          <span class="btn cancel" @click="tooglePay">取消</span>
          <span class="btn enter" @click="enterPay">确认</span>
        </div>
      </div>
    </van-popup>

    <div class="edit-tool-bar" v-show="canEdit">
      <p class="info-item" @click="setTools('zoomin')" v-show="currentEditDragItemId.nodeName === 'IMG'">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zoomin"></use>
        </svg>
        <span class="words">放大</span>
      </p>
      <p class="info-item" v-show="currentEditDragItemId.nodeName !== 'IMG'">
        <span class="words" @click="setTools('addW')">宽度+</span>
        <span class="words" @click="setTools('reduceW')">宽度-</span>
      </p>
      <p class="info-item" @click="setTools('zoomout')" v-show="currentEditDragItemId.nodeName === 'IMG'">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zoomout"></use>
        </svg>
        <span class="words">缩小</span>
      </p>
      <p class="info-item" v-show="currentEditDragItemId.nodeName !== 'IMG'">
        <span class="words" @click="setTools('addH')">高度+</span>
        <span class="words" @click="setTools('reduceH')">高度-</span>
      </p>
      <p class="info-item" @click="setTools('hengshu')" v-show="currentEditDragItemId.nodeName === 'DIV'">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-hengshuping"></use>
        </svg>
        <span class="words">横竖</span>
      </p>
      <p class="info-item" @click="setTools('upZindex')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiangshangzhanhang"></use>
        </svg>
        <span class="words">置上</span>
      </p>
      <p class="info-item" @click="setTools('downZindex')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiangxiazhanhang"></use>
        </svg>
        <span class="words">置下</span>
      </p>
      <p class="info-item" @click="setTools('delete')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shanchu"></use>
        </svg>
        <span class="words">删除</span>
      </p>
    </div>
    <div class="edit-tool-bar edit-tool-bar2" v-show="currentEditDragItemId.nodeName !== 'IMG' && canEdit">
      <p class="info-item" @click="setTools('jiacu')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-jiacu"></use>
        </svg>
      </p>
      <p class="info-item" @click="setTools('xieti')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-iconxieti"></use>
        </svg>
      </p>
      <p class="info-item" @click="showFontSize">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zitidaxiao"></use>
        </svg>
      </p>
      <p class="info-item">
        <colorPicker
        v-model="color"
        @change="handleChangeColor"></colorPicker>
      </p>
      <p class="info-item" @click="setTools('fangxiang')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-trun"></use>
        </svg>
      </p>
      <p class="info-item" @click="showMarqueeSpeed">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-Group-"></use>
        </svg>
      </p>
      <p class="info-item" @click="showFontFamily">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zitiyanse"></use>
        </svg>
      </p>
      <p class="info-item" @click="setTools('isMarquee')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-stop"></use>
        </svg>
      </p>
    </div>
    <van-picker
    v-show="marqueefangxiang"
    show-toolbar
    :columns="marqueeColumns"
    @change="onChangeMarqueeColumns"
    @cancel="pickerCancel('marqueefangxiang')"
    @confirm="pickerConfirm('marqueefangxiang')"
    title="滚动方向"/>
    <van-picker
    v-show="fontFamilyShow"
    show-toolbar
    :columns="fontFamilyList"
    @change="onChangeFontFamily"
    @cancel="pickerCancel('fontFamily')"
    @confirm="pickerConfirm('fontFamily')"
    title="字体"/>
    <van-picker
    v-show="fontSizeShow"
    show-toolbar
    :columns="fontSizeList"
    @change="onChangeFontSize"
    @cancel="pickerCancel('fontSize')"
    @confirm="pickerConfirm('fontSize')"
    title="字体大小"/>
    <van-dialog
      v-model="marqueeSpeedShow"
      show-cancel-button
      :before-close="beforeClose"
      @confirm="marqueeSpeedConfirm"
    >
      <van-field
        v-model="marqueeInfo.scrollamount"
        label="速率"
        placeholder="请输入速率1-500"
      />
      <van-field
        v-model="marqueeInfo.scrolldelay"
        label="停顿"
        placeholder="请输入停顿时间1-10"
      />
    </van-dialog>

    <svg
      class="icon player-btn"
      :class="playerClas"
      @click="togoolePlay"
      aria-hidden="true">
      <use xlink:href="#icon-yinyue"></use>
    </svg>
    <audio style="display:none" ref="player" loop="loop"></audio>
  </div>
</template>

<script>
var startX,startY,sX,sY,moveX,moveY,leftX,rightX,topY,bottomY
import {mapState} from 'vuex'
import {sacrificeList, bg} from '../assets/data.js'
import {Dialog, Toast} from 'vant'
import {addShoppingCart, delShoppingCart, updateMemorialCs, getMemorialCs, saveMemorialCs, getSoppingCart} from '../api/getData.js'

export default {
  data () {
    return {
      marqueeColumns: ['从左至右', '从右至左', '从上至下', '从下至上'],
      positionX: 0,
      positionY: 0,
      winW: 0,
      winH: 0,
      currentEditDragItemLists: [],
      currentPayDragItemList: [],
      currentEditDragItemId: {},
      show: false,
      shoppingList: sacrificeList,
      currentInnerShoppingList: [],
      payPanelShow: false,
      payPanelInfo: {},
      currentShoppingPayInfo: {
        months: 1,
        number: 1,
        price: 0,
        originalPrice: 0,
        vipPrice: 0,
        imgUrl: '',
        width: 0,
        height: 0
      },
      outListWrapperShow: true,
      muyuanBgList: [],
      mudiShow: false,
      dataURL: '',
      currentBg: '',
      isPlaying: false,
      currentWords: {
        words:''
      },
      color: '#000',
      marqueefangxiang: false,
      marqueeInfo: {
        direction: '',
        scrollamount: '',
        scrolldelay: ''

      },
      marqueeSpeedShow: false,
      fontFamilyShow: false,
      fontFamilyList: ['微软雅黑', '宋体', '楷体', '黑体', '方正雅圆'],
      crruntFontFamily: '',
      fontSizeList: ['10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px'],
      fontSizeShow: false,
      currentFontSize: '',
      canEdit: false,
      musicInfo: {
        musicurl: '',
        musicname: ''
      }
    }
  },
  created() {
    this.currentEditDragItemLists = [].concat(this.dragItemLists)
    this.currentBg = this.mudiBg
    // console.log(bg)
    this.muyuanBgList = [].concat(bg)
    getMemorialCs().then(res => {
      this.currentEditDragItemLists = JSON.parse(res.data.object.props) || []
      this.musicInfo.musicurl = res.data.object.musicurl
      this.currentBg = res.data.object.musicname
    })
  },
  mounted() {
    this.winW = document.querySelector('.building-edit').clientWidth
    this.winH = document.querySelector('.building-edit').clientHeight
    // this.checkMarquee()
    let checkMusic = setInterval(() => {
      if (this.musicInfo.musicurl) {
        clearInterval(checkMusic)
        this.$refs.player.src = this.musicInfo.musicurl
        console.log(this.musicInfo.musicurl)
        this.$refs.player.play()
        this.isPlaying = true
      }
    }, 1000)
  },
  methods: {
    touchstart (e) {
      // this.dragItemLists.forEach((el,elIndex) => {
      //   this.$set(this.dragItemLists, elIndex, Object.assign(el, {actived: false}))
      // })
      let currentDiv = e.target
      if (currentDiv.dataset.canedite === '1') {
        this.$nextTick(() => {
        let imgs = this.$refs.saveBg.children
        for (let index = 1; index < imgs.length; index++) {
            imgs[index].classList.remove('actived')
          }
          currentDiv.classList.add('actived')
        })
        startX = e.targetTouches[0].pageX
        startY = e.targetTouches[0].pageY

        sX = currentDiv.offsetLeft
        sY = currentDiv.offsetTop

        leftX = startX - sX
        rightX = this.winW  + leftX
        topY = startY - sY
        bottomY = this.winH + topY
      }
    },
    touchmove (e) {
      e.preventDefault()
      let currentDiv = e.target
      if (currentDiv.dataset.canedite === '1') {
        this.dragItemLists.forEach((el,elIndex) => {
          this.$set(this.dragItemLists, elIndex, Object.assign(el, {zIndex: 996}))
        })
        let currentDiv = e.target
        moveX=e.targetTouches[0].pageX
        moveY=e.targetTouches[0].pageY

        if(moveX<leftX){moveX=leftX}
        if(moveX>rightX){moveX=rightX}
        if(moveY<topY){moveY=topY}
        if(moveY>bottomY){moveY=bottomY}
        currentDiv.style.left = moveX + sX - startX + 'px'
        currentDiv.style.top = moveY + sY - startY + 'px'

        this.currentEditDragItemLists.forEach((el, elIndex) => {
          if (e.target.id === el.id) {
            this.$set(this.currentEditDragItemLists[elIndex], 'top', e.target.style.top.replace('px', ''))
            this.$set(this.currentEditDragItemLists[elIndex], 'left', e.target.style.left.replace('px', ''))
          }
        })
      }
    },
    touchend (e) {
      let currentDiv = e.target
      if (currentDiv.dataset.canedite === '1') {
        this.currentEditDragItemLists.forEach((el, elIndex) => {
          if (e.target.id == el.id) {
            if (!this.currentEditDragItemLists[elIndex].width) {
              this.$set(this.currentEditDragItemLists[elIndex], 'width', e.target.width)
            }
            if (!this.currentEditDragItemLists[elIndex].height) {
              this.$set(this.currentEditDragItemLists[elIndex], 'width', e.target.height)
            }
            this.$set(this.currentEditDragItemLists[elIndex], 'top', e.target.style.top.replace('px', ''))
            this.$set(this.currentEditDragItemLists[elIndex], 'left', e.target.style.left.replace('px', ''))
          }
        })
        this.$set(this.currentEditDragItemId, 'nodeName', e.target.nodeName)
        this.currentEditDragItemId.id = e.target.id
      }
    },
    touchcancel (e) {
      console.log('touchcancel')
    },
    showModal (type) {
      switch (type) {
        case 'jisi':
          this.show = true
          break;
        case 'bg':
          this.mudiShow = true
          break;
        default:
          break;
      }

    },
    close () {
      this.show = false
      // this.mudiShow = false

      this.outListWrapperShow = true
      // this.currentShoppingPayInfo = Object.assign({},{
      //   months: 0,
      //   number: 0,
      //   price: 1000,
      //   originalPrice: 0,
      //   vipPrice: 0,
      //   imgUrl: '',
      //   width: 0,
      //   height: 0
      // })
    },
    closeMudi () {
      this.mudiShow = false
      this.outListWrapperShow = true
      this.currentShoppingPayInfo = Object.assign({},{
        months: 1,
        number: 1,
        price: 1000,
        originalPrice: 0,
        vipPrice: 0,
        imgUrl: '',
        width: 0,
        height: 0
      })
    },
    back () {
      this.outListWrapperShow = true
    },
    checkInnerList (item) {
      this.currentInnerShoppingList = [].concat(item.childLists)
      this.outListWrapperShow = false
    },
    monthsHandleChange (months) {
      this.currentShoppingPayInfo.months = months
      this.currentShoppingPayInfo.originalPrice = months * this.currentShoppingPayInfo.price * this.currentShoppingPayInfo.number
      this.currentShoppingPayInfo.vipPrice = months * this.currentShoppingPayInfo.price * this.currentShoppingPayInfo.number
    },
    numberHandleChange (number) {
      this.currentShoppingPayInfo.number = number
      this.currentShoppingPayInfo.originalPrice = number * this.currentShoppingPayInfo.price * this.currentShoppingPayInfo.months
      this.currentShoppingPayInfo.vipPrice = number * this.currentShoppingPayInfo.price * this.currentShoppingPayInfo.months
    },
    tooglePay () {
      !!this.payPanelShow ? this.payPanelShow = false : this.payPanelShow = true
      // this.currentShoppingPayInfo = Object.assign({},{
      //   months: 1,
      //   number: 1,
      //   price: 1000,
      //   originalPrice: 0,
      //   vipPrice: 0,
      //   imgUrl: '',
      //   type: null
      // })
    },
    payShopping (shoppingInfo, type) {
      console.log(shoppingInfo)
      this.tooglePay()
      this.currentShoppingPayInfo = Object.assign({type: type}, shoppingInfo)
    },
    enterPay () {
      if (this.currentShoppingPayInfo.type === 2) {
        this.currentEditDragItemLists.push(Object.assign(this.currentShoppingPayInfo, {
          left: 100,
          top: 100,
          zIndex: 666,
          // id: this.getRandomStr(this.currentShoppingPayInfo.id)
          id: this.currentShoppingPayInfo.id,
          canedite: 1
        }))

        this.close()
        // this.closeMudi()
      } else if (this.currentShoppingPayInfo.type === 'bg') {
        this.currentBg = this.currentShoppingPayInfo.imgUrl
        // this.closeMudi()
        this.close()
      } else if (this.currentShoppingPayInfo.type === 'words') {
        this.currentEditDragItemLists.push(Object.assign(this.currentShoppingPayInfo, {
          left: 0,
          top: 0,
          zIndex: 666,
          id: this.getRandomStr(this.currentShoppingPayInfo.id),
          canedite: 1
        }))
        this.close()
      }


      addShoppingCart({
        goodnum: this.currentShoppingPayInfo.number * this.currentShoppingPayInfo.months,
        goodprice: this.currentShoppingPayInfo.price,
        goodname: this.currentShoppingPayInfo.name || '未知物品',
        gooddesc: '暂无描述',
        picurl: this.currentShoppingPayInfo.imgUrl || null
      }).then((res) => {
        let sid = res.data.object.id
        this.currentEditDragItemLists[this.currentEditDragItemLists.length-1].sid = sid
      })

      this.canEdit = true
      this.tooglePay()
    },
    // 影像跳转
    video () {
      this.$router.push('/up-video')
    },
    // music
    music () {
      // this.$dialog.confirm({
      //   title: '音乐升级',
      //   message: '是否选择开通音乐服务，开通费用100元，付款成功后，可返回选择音乐播放'
      // }).then(() => {
      this.$router.push('/music-list')
      // }).catch(() => {
      // });
    },
    save () {
      this.currentEditDragItemLists.forEach((ell, ellIndex) => {
        if (ell.toolType === 'words') {
          document.querySelectorAll('marquee.setting-tools').forEach((el, elIndex) => {
            console.log(el.id === ell.id)
            if (el.id == ell.id) {
              console.log(el)
              this.currentEditDragItemLists[ellIndex].words = el.innerText
            }
          })
        }
      })
      this.canEdit = false
      // if (this.currentPayDragItemList.length >= 1) {
      //   this.$router.push('/car')
      // }
      getSoppingCart().then(res => {
        if (res.data.object.length >= 1) {
          let priceCount = 0
          res.data.object.forEach(el => {
            if (el.goodstatus === 0) {
              priceCount += el.goodprice
            }
          })
          if (priceCount > 0 ) {
            Dialog.confirm({
              title: '提示',
              message: '您编辑的道具有部分需要付费才能使用，是否跳转付费页面？'
            }).then(() => {
              // on confirm
              this.$store.commit('MUDI_EDIT_INFO', this.currentEditDragItemLists)
              this.$store.commit('MUDI_BACKGROUND_IMAGE', {url: this.currentBg})
              this.$store.commit('MUDI_EDIT_MUSIC', this.musicInfo.musicurl)
              this.$router.push('/car?payMethods=building')
            }).catch(() => {
              // on cancel
            })
          } else {
            updateMemorialCs(this.currentBg, this.musicInfo.musicurl, this.currentEditDragItemLists).then(res => {
              Toast('保存成功！')
              let changeList = []
              this.currentEditDragItemLists.forEach(e => {
                changeList.push(Object.assign(e, {canedite: 2, isContentEditable: false}))
              })
              this.currentEditDragItemLists = [].concat(changeList)
            })
          }
        }

      })

      // saveMemorialCs('aaa', 'bbb', this.currentEditDragItemLists)
    },
    setTools (methods) {
      this.currentEditDragItemLists.forEach((el, elIndex) => {
        if (el.id == this.currentEditDragItemId.id) {
          if (methods === 'zoomin') {
            if (this.currentEditDragItemId.nodeName === 'MARQUEE' || this.currentEditDragItemId.nodeName === 'DIV') {
              this.$set(this.currentEditDragItemLists[elIndex], 'height', el.height += 10)
            } else {
              this.$set(this.currentEditDragItemLists[elIndex], 'height', el.height *= 1.1)
              this.$set(this.currentEditDragItemLists[elIndex], 'width',  el.width *= 1.1)
            }
          } else if (methods === 'zoomout') {
            if (this.currentEditDragItemId.nodeName === 'MARQUEE' || this.currentEditDragItemId.nodeName === 'DIV') {
              this.$set(this.currentEditDragItemLists[elIndex], 'fontSize', el.fontSize -= 2)
            } else {
              this.$set(this.currentEditDragItemLists[elIndex], 'height', el.height /= 1.1)
              this.$set(this.currentEditDragItemLists[elIndex], 'width',  el.width /= 1.1)
            }
          } else if (methods === 'upZindex') {
            this.$set(this.currentEditDragItemLists[elIndex], 'zIndex', el.zIndex += 1)
          } else if (methods === 'downZindex') {
            this.$set(this.currentEditDragItemLists[elIndex], 'zIndex', el.zIndex -= 1)
          } else if (methods === 'delete') {
            delShoppingCart(this.currentEditDragItemLists[elIndex].sid)
            this.currentEditDragItemLists.splice(elIndex, 1)
            this.currentPayDragItemList.splice(elIndex, 1)
          } else if (methods === 'hengshu') {
            console.log(1)
            this.$set(this.currentEditDragItemLists[elIndex], 'isHeng', this.currentEditDragItemLists[elIndex].isHeng ? false : true)
          } else if (methods === 'addH') {
            this.$set(this.currentEditDragItemLists[elIndex], 'height', this.currentEditDragItemLists[elIndex].height+=10)
          } else if (methods === 'reduceH') {
            this.$set(this.currentEditDragItemLists[elIndex], 'height', this.currentEditDragItemLists[elIndex].height-=10)
          } else if (methods === 'addW') {
            this.$set(this.currentEditDragItemLists[elIndex], 'width', this.currentEditDragItemLists[elIndex].width+=10)
          } else if (methods === 'reduceW') {
            this.$set(this.currentEditDragItemLists[elIndex], 'width', this.currentEditDragItemLists[elIndex].width-=10)
          } else if (methods === 'jiacu') {
            this.$set(this.currentEditDragItemLists[elIndex], 'fontWeight', this.currentEditDragItemLists[elIndex].fontWeight === 'normal' ? 'bold' : 'normal')
          } else if (methods === 'xieti') {
            this.$set(this.currentEditDragItemLists[elIndex], 'fontStyle', this.currentEditDragItemLists[elIndex].fontStyle === 'normal' ? 'italic' : 'normal')
          } else if (methods === 'underline') {
            this.$set(this.currentEditDragItemLists[elIndex], 'textDecoration', this.currentEditDragItemLists[elIndex].textDecoration === 'none' ? 'underline' : 'none')
          } else if (methods === 'fontcolor') {
            this.$set(this.currentEditDragItemLists[elIndex], 'fontcolor', this.color)
          } else if (methods === 'fangxiang') {
            this.marqueefangxiang = true
          } else if (methods === 'marqueefangxiang') {
            this.$set(this.currentEditDragItemLists[elIndex], 'direction', this.marqueeInfo.direction)
          } else if (methods === 'setMarqueeInfo') {
            this.$set(this.currentEditDragItemLists[elIndex], 'scrollamount', this.marqueeInfo.scrollamount)
            this.$set(this.currentEditDragItemLists[elIndex], 'scrolldelay', this.marqueeInfo.scrolldelay)
            this.marqueeInfo.scrollamount = ''
            this.marqueeInfo.scrolldelay = ''
          } else if (methods === 'fontFamily') {
            this.$set(this.currentEditDragItemLists[elIndex], 'fontFamily', this.crruntFontFamily)
          } else if (methods === 'fontSize') {
            this.$set(this.currentEditDragItemLists[elIndex], 'fontSize', this.currentFontSize)
          } else if (methods === 'isMarquee') {
            this.$set(this.currentEditDragItemLists[elIndex], 'isMarquee', this.currentEditDragItemLists[elIndex].isMarquee ? false : true)
            this.checkMarquee(this.currentEditDragItemLists[elIndex].id, this.currentEditDragItemLists[elIndex].isMarquee)
          }
        }
      })
    },
    chceckSize(methods, size) {
      if (methods === 'zoomin') {
        return size>10 ? 10 : size
      } else {
        return size<1 ? 1 : size
      }
    },
    togoolePlay () {
      if (!!this.isPlaying) {
        this.isPlaying = false
        this.$refs.player.pause()
      } else {
        this.isPlaying = true
        this.$refs.player.play()
      }
    },
    getRandomStr (id) {
      return id + Math.random().toString(36).substr(2)
    },
    onEditorBlur () {

    },
    onEditorFocus () {},
    onEditorChange () {},
    handleChangeColor (e) {
      this.color = e
      this.setTools('fontcolor')
    },
    onChangeMarqueeColumns (e, value) {
      switch (value) {
        case '从下至上':
          this.marqueeInfo.direction = 'up'
          break;
        case '从上至下':
          this.marqueeInfo.direction = 'down'
          break;
        case '从左至右':
          this.marqueeInfo.direction = 'right'
          break;
        case '从右至左':
          this.marqueeInfo.direction = 'left'
          break;
        default:
          break;
      }
    },
    pickerCancel (methods) {
      if (methods === 'marqueefangxiang') {
        this.marqueefangxiang = false
      } else if (methods === 'fontFamily') {
        this.fontFamilyShow = false
      } else if (methods === 'fontSize') {
        this.fontSizeShow = false
      }
    },
    pickerConfirm (methods) {
      if (methods === 'marqueefangxiang') {
        this.marqueefangxiang = false
        this.setTools('marqueefangxiang')
      } else if (methods === 'fontFamily') {
        this.fontFamilyShow = false
        this.setTools('fontFamily')
      } else if (methods === 'fontSize') {
        this.fontSizeShow = false
        this.setTools('fontSize')
      }
    },
    beforeClose (action, done) {
      done()
    },
    marqueeSpeedConfirm () {
      this.setTools('setMarqueeInfo')
    },
    showMarqueeSpeed () {
      this.marqueeSpeedShow = true
    },
    onChangeFontFamily(e, value) {
      this.crruntFontFamily = value
      this.setTools('fontFamily')
    },
    showFontFamily () {
      this.fontFamilyShow = true
    },
    onChangeFontSize(e, value) {
      this.currentFontSize = value.replace('px', '')
      // this.setTools('fontFamily')
    },
    showFontSize () {
      this.fontSizeShow = true
    },
    checkMarquee (id, ismarquee) {
      let $event = document.getElementById(id)
      if (ismarquee) {
        // $event.start()
      } else {
        // $event.stop()
      }
    },
    edit () {
      this.canEdit = true
      let changeList = []
      this.currentEditDragItemLists.forEach(e => {
        changeList.push(Object.assign(e, {canedite: 1, isContentEditable: true}))
      })
      this.currentEditDragItemLists = [].concat(changeList)
    },
    toRouterFrom () {
      this.$router.push(window.localStorage.getItem('toBuildingRouterPath') || '/')
    }
  },
  computed: {
    ...mapState({
      dragItemLists: state => state.mudiEdit.mudiEditInfo,
      mudiBg: state => state.mudiEdit.mudiBackgroundImage
      // musicInfo: state => state.mudiEdit.mudiMusic
    }),
    playerClas () {
      return this.isPlaying ? 'play' : 'play pause'
    }
  }
}
</script>

<style scoped lang="scss">
.building-edit {
  width: 960px;
  height: 600px;
  position: relative;
  top: 0;
  .build-bg {
    width: 100%;
    height: 100%;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    overflow: hidden;
    .bg {
      position: absolute;
      z-index: 0;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
    }
  }
}
.tool-list {
  position: fixed;
  bottom: 108px;
  right: 1vw;
  font-size: 14px;
  z-index: 9999;
  .btn {
    width: 42px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    background-color: #fff;
    border-radius: 50%;
    margin-bottom: 10px;
  }
}
img.setting-tools,marquee.setting-tools,div.setting-tools {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  &.actived {
    border: 1px dotted #000;
  }
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  font-size: 12 px;
}
.info {
  display: flex;
  font-size: 12px;
  color: #ef8342;
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
}
.van-popup.shopping-list-modal {
  min-width: 100%;
  min-height: 100%;
  background-color: #f5f5f5;
  .header {
    padding: 10px 8px;
    .btn {
      display: inline-block;
      padding: 6px 2px;
      font-size: 12px;
    }
  }
}
.out-list-wrapper,.inner-list-wrapper {
  display: flex;
  flex-wrap: wrap;
  .out-list-item, .inner-list-item {
    width: 25%;
    box-sizing: border-box;
    text-align: center;
    margin: 10px 0;
    img {
      width: 70%;
      height: 42px;
    }
    .tit {
      margin-top: 6px;
      font-size: 16px;
      color: #ef8342;
    }
    .price {
      margin-top: 6px;
      font-size: 14px;
    }
  }
}
.pay-modal {
  width: 95vw;
  overflow: hidden;
  .pay-box {
    .tit {
      background-color: #5abbf4;
      text-align: center;
      color: #fff;
      padding: 10px 0;
    }
  }
  .main-body {
    display: flex;
    padding: 20px 0;
    .img-box {
      width: 40%;
      flex: 0 0 40%;
      text-align: center;
      img {
        max-width: 90%;
        max-height: 100px;
      }
    }
    .main-right {
      width: 60%;
      box-sizing: border-box;
      .item {
        width: 100%;
        margin-bottom: 10px;
        .el-input-number.el-input-number--mini {
          width: calc(100% - 88px);
        }
        .title {
          width: 60px;
          display: inline-block;
        }
        .price {
          text-align: right;
        }
        .counter, .price {
          display: inline-block;
          width: calc(100% - 66px);
        }
        .counter {
          .reduce, .add {
            width: 40px;
            border: 1px solid #eee;
            padding: 0 6px;
            display: inline-block;
          }
          .counter-inp {
            width: calc(100% - 60px);
            border: 1px solid #eee;
            display: inline-block;
          }
        }
      }
    }
  }
  .enter-pay {
    display: flex;
    justify-content: space-between;
    text-align: center;
    border-top: 1px solid #eee;
    .btn {
      flex: 1;
      padding: 10px 0;
      &.cancel {
        border-right: 1px solid #eee;
        color: #666;
      }
      &.enter {
        color: #ef8342;
      }
    }
  }
}
.edit-tool-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  padding: 10px 0;
  background-color: rgba(0, 0, 0, 0.25);
  color: #ef8342;
  &.edit-tool-bar2 {
    bottom: 53.5px;
  }
  .info-item {
    width: 20%;
    text-align: center;
    .words {
      display: block;
      font-size: 14px;
      margin-top: 4px;
    }
  }
}
.icon.player-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 999;
  &.play {
    animation: playing 10s linear infinite
  }
  &.pause {
    animation-play-state: paused
  }
}
@keyframes playing {
  from {
    transform: rotate(0)
  }
  to {
    transform: rotate(360deg)
  }
}
.van-picker{
	position: fixed;
	bottom: 0;
	width: 100%;
  z-index: 9999;
}
</style>
